<template>
  <div class="table">
    <div style="margin: 10px 0;padding: 10px 5px">
      <el-input style="width: 200px;padding-right: 5px" placeholder="请输入内容" v-model="style"></el-input>
      <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
    </div>
    <div style="margin: 10px 0;padding: 0 5px">
      <el-button type="primary" icon="el-icon-circle-plus-outline" class="ml-5" @click="addEdit">新增</el-button>
      <el-popconfirm style="padding-left: 5px;padding-right: 5px" title="确认批量删除吗?" @confirm="delBatch">
        <template #reference>
          <el-button type="danger">批量删除</el-button>
        </template>
      </el-popconfirm>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="40%">
      <el-form label-width="90px" width="30%">
        <el-form-item label="标题" prop="name">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="风格" prop="name">
          <el-input v-model="editForm.style"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input v-model="editForm.introduction" type="textarea" maxlength="50"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
      </template>
    </el-dialog>

    <!-- 新增弹窗 -->
    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="40%">
      <el-form label-width="90px" width="30%">
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="风格" prop="name">
          <el-input v-model="form.style"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input v-model="form.introduction" type="textarea" maxlength="50"></el-input>
        </el-form-item>
        <!--头像-->
        <el-form-item label="封面" prop="introduction">
          <el-upload
            action=""
            :show-file-list="true"
            :multiple="false"
            :auto-upload="false"
            :on-change="handleChange"
            :file-list="fileList"
            list-type="picture-card"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
      </template>
    </el-dialog>

    <!--显示乐谱-->
    <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="55" v-if="false"></el-table-column>
      <el-table-column prop="title" label="标题" width="120"></el-table-column>
      <el-table-column prop="style" label="风格" width="120" align="center"></el-table-column>
      <el-table-column prop="introduction" label="介绍" align="center">
        <template slot-scope="scope" width="120%">
          <p style="height: 60px;line-height: 1.4em">{{ scope.row.introduction }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="picture" label="封面" align="center">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.picture" alt="" style="width: 50px;height: 50px">
          </div>
          <el-upload ref="upload" :action="uploadUrl(scope.row.id)" :on-success="filesUploadSuccess">
            <el-button size="mini">更新图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column prop="staff" label="乐谱" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="staffEdit(scope.row.id)">查看乐谱</el-button>
        </template>
      </el-table-column>
      <!--按钮 -->
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit"></el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <el-button slot="reference" type="danger" icon="el-icon-delete" style="margin-left: 6px"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="padding: 10px 0;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>

import {addStaffsList, deleteStaffsList, deleteStaffsLists, getStaffsList, updateStaffsList} from "../api/index";
import {mixin} from "@/mixins";

export default {
  mixins: [mixin],
  name: "LyricStaff",
  data() {
    return {
      //查询
      tableData: [],
      style: '',//搜索
      total: 0,//分页，默认总数为0
      pageNum: 1,//分页，默认第一页
      pageSize: 5,//分页，默认一页有两条
      fileList: [],
      editForm: {
        title: '',
        picture: '',
        introduction: '',
        style: ''
      },
      form: {
        title: '',
        introduction: '',
        style: '',
        file: null
      },
      dialogFormVisible: false,//默认不展示
      editVisible: false,//默认不展示
      multipleSelection: [],//批量删除选中集合
    }
  },

  created() {
    this.getData();
  },

  methods: {
    //转向乐谱详情页面
    staffEdit(id) {
      console.log({id})
      this.$router.push({path: '/Staff', query: {id}});
    },
    handleChange(file) {
      console.log(file.name)
      this.form.file = file.raw;
      this.fileList = [file];
      console.log(this.fileList)
    },
    //更新图片
    uploadUrl(id) {
      return `http://localhost:8888/upload?id=${id}`
    },
    filesUploadSuccess(res) {
      console.log(res)
      this.getData()//刷新表格
    },
    //查询乐谱
    getData() {
      this.tableData = [];//清空tableData里的数据
      getStaffsList(
        this.pageNum,
        this.pageSize,
        this.style
      ).then(res => {
        const {records, total, pages} = res.data;
        this.tableData = records
        this.total = total
        if (this.pageNum > 1 && pages < this.pageNum) {
          console.log('当前页没有数据并且不是第一页是，重新请求前一页的数据')
          this.pageNum--;
          this.getData();
        }
      })
    },
    // 处理搜索按钮点击
    handleQuery() {
      this.pageNum = 1;
      this.getData();
    },
    //分页
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.pageSize = pageSize
      this.getData()//调用分页方法
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.pageNum = pageNum
      this.getData()//调用分页方法
    },
    //新增
    addEdit() {
      this.dialogFormVisible = true//打开弹窗
    },
    //新增确认按钮
    add() {
      const formData = new FormData();
      Object.entries(this.form).forEach(([key, value]) => {
        formData.append(key, value)
      })
      addStaffsList(formData).then(res => {
        console.log({res})
        if (res) {
          this.$message.success("新增成功")
          this.dialogFormVisible = false//关闭弹窗

          this.getData()//刷新数据
        } else {
          this.$message.error("新增失败")
          this.dialogFormVisible = false//关闭弹窗
        }
      })
    },
    //操作----编辑
    handleEdit(row) {
      Object.assign(this.editForm, row) //把数据显示在表单上
      this.editVisible = true//打开弹窗
    },
    //编辑确定按钮
    saveEdit() {
      updateStaffsList(this.editForm).then(res => {
        if (res) {
          this.$message.success("修改成功")
          this.editVisible = false//关闭弹窗

          this.getData()//刷新数据
        } else {
          this.$message.error("修改失败")
          this.editVisible = false//关闭弹窗
        }
      })
    },
    //删除
    handleDelete(id) {
      deleteStaffsList(id).then(res => {
        if (res) {
          this.$message.success("删除成功")
          this.getData()
        } else {
          this.$message.success("删除失败")
        }
      })
    },
    //批量删除
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //批量删除按钮
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)//把对象数组变成集合[{},{},{}] ----> [1,2,3]
      deleteStaffsLists(ids).then(res => {
        if (res) {
          this.$message.success("批量删除成功")
          this.getData()
        } else {
          this.$message.success("批量删除失败")
        }
      })
    },
  }
}
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}

</style>
